<template>
	<view class="">
		
		<view class="container">
				
				<view class="page-section-title">
					<view class="title">
						投资房产过多
					</view>
					<text class="btn" >编辑</text>
				</view>
				<view class="canvasView">
					<view class="canvas-bar">
						<view class="tuijian">推荐配置</view>
						<text class="chongxuan-btn btn" >重新选择资产</text>
					</view>
					<mpvue-echarts :echarts="echarts" :onInit="pieInit" canvasId="pie" ref="pieChart" />
				</view>
				<view class="canvasView">
					<view class="canvas-bar">
						<view class="tuijian">推荐资产组合</view>
					</view>
					
					<mpvue-echarts :echarts="echarts" :onInit="lineInit" canvasId="line" ref="lineChart" />
				</view>
				<view class="kehu-box">
					<image class="kehu-image" src="http://ai.ylcaifu.com/appimg/images/5.0-%E6%88%91%E7%9A%84-%E7%90%86%E8%B4%A2%E5%B8%88/5.3.2.1-%E9%A1%B5%E9%9D%A2/android/drawable-xhdpi/touxiang.png" mode="widthFix"></image>
					<view class="btn" @click="toLcsKehubiaoqian">
						更改客户标签
					</view>
				</view>
				<view class="biaoqian-box">
					<view class="biaoqian-item">
						非自住房大于10
					</view>
					<view class="biaoqian-item">
						非自住房大于10
					</view>
					<view class="biaoqian-item">
						非自住房
					</view>
				</view>
				
			</view>
			
	</view>
</template>

<script>
	import * as echarts from '../../../../../components/echarts/echarts.simple.min.js';
	import mpvueEcharts from '../../../../../components/mpvue-echarts/src/echarts.vue';

	const cityList = [{
		value: 25,
		name: '浮动收益 25%'
	}, {
		value: 10,
		name: '保险保障 10%'
	}, {
		value:15,
		name: '流动性资产 15%'
	},{
		value:10,
		name: '风险对冲资产 10%'
	},{
		value:20,
		name: '固定收益 20%'
	}];

	let pieOption = {
		animation: false,
		backgroundColor: '#F8F8F8',
		color: ['#d0ac6d', '#fd5c11', '#488aff', '#1bd38b', '#8350f5', '#FF9F7F'],
		series: [{
			label: {
				normal: {
					fontSize: 14
				}
			},
			type: 'pie',
			center: ['50%', '50%'],
			radius: ['40%', '70%'],
			data: [],
			itemStyle: {
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 2, 2, 0.3)'
				}
			}
		}]
	};

	let lineOption = {
		animation: false,
		color: ['#37A2DA', '#9FE6B8'],
		grid: {
			x: 35,
			x2: 10,
			y: 30,
			y2: 25
		},
		calculable: false,
		xAxis: [{
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		}],
		yAxis: [{
			type: 'value',
			splitArea: {
				show: true
			}
		}],
		series: [{
			name: '蒸发量',
			type: 'line',
			data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
		}, {
			name: '降水量',
			type: 'line',
			data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
		}]
	};

	export default {
		data() {
			return {
				echarts: echarts,
				updateStatus: false
			}
		},
		onLoad() {
			pieOption.series[0].data = cityList.slice(0);
			console.log(pieOption)
			console.log("nihao")
		},
		methods: {
			toLcsKehubiaoqian(){
				uni.navigateTo({
					url: './lcs-kehubiaoqian/lcs-kehubiaoqian',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goBrowser() {
				// #ifdef APP-PLUS
				plus.runtime.openURL('https://github.com/F-loat/mpvue-echarts');
				// #endif
				// #ifdef MP-WEIXIN
				uni.showModal({
					content: '请复制链接在浏览器里打开',
					showCancel: false
				})
				// #endif
			},
			updatePie() {
				// 参考 mpvue-charts 的懒加载示例
				// https://github.com/F-loat/mpvue-echarts/blob/master/examples/lazyLoad.vue

				if (this.updateStatus) {
					return;
				}
				pieOption.series[0].data.push({
					value: 20,
					name: '武汉'
				});
				pieOption.series[0].data.push({
					value: 10,
					name: '杭州'
				});
				this.$refs.pieChart.init();
				this.updateStatus = true;
			},
			pieInit(canvas, width, height) {
				let pieChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(pieChart)

				pieChart.setOption(pieOption)
				return pieChart
			},
			lineInit(canvas, width, height) {
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)

				lineChart.setOption(lineOption)
				return lineChart
			}
		},
		components: {
			mpvueEcharts
		}
	}
</script>

<style>
	page,
	view {
		display: flex;
		/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。如不了解flex布局，请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
	}
	page {
		background: rgb(255,255,255);
	}

	.page-section-title {
		width: 690upx;
		flex-direction: row;
		justify-content: space-between;
		height: 55px;
		align-items: center;
		border-bottom: 1px solid rgba(238,238,238,1);
		
	}

	.title {
		font-size:17px;

		font-weight:bold;
		color: #444444;
		border-left: 4px solid rgba(203,147,89,1);
		text-indent: 10px;
	}
	.btn{
		border:1px solid rgba(196,156,90,1);
		border-radius:20px;
		color: rgba(196,156,90,1);
		padding: 3px 10px ;
		font-size:12px
	}
	.container {
		width: 100%;
		padding:0 30upx 30upx;
		box-sizing: border-box;
		
	}

	.container,
	.canvasView {
		width: 100%;
		flex: 1;
		flex-direction: column;
	}
	.canvasView canvas{
		height: 400upx;
	}
	.navigate {
		color: #007AFF;
	}

	.canvas-bar {
		display: flex;
		flex-direction: row;
		justify-content: center;
		height: 55px;
		align-items: center;
	}
	.tuijian{
		font-size:16px;

		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.chongxuan-btn{
		position: absolute;
		right: 30upx;
	}
	.update-btn {
		margin-right: 30upx;
	}
	.kehu-box{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 79px;
		border-top: 1px solid rgba(238,238,238,1);
	}
	.kehu-image{
		height: 50px;
		width: 50px;
	}
	.biaoqian-box{
		flex-direction: row;
		flex-wrap: wrap;
	}
	.biaoqian-item{
		background:rgba(245,245,245,1);
		border-radius:30px;
		font-size:12px;
		line-height: 30px;
		padding: 0 10px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
</style>
